<template>
	<view>
		<page-header :disabled="true"></page-header>
		<scroll-view 
			class="content"
			scroll-y
			@scrolltolower="handlePullRefresher"
			:refresher-enabled="true"
			>
			<uni-list>
				<uni-list-chat v-for="(team, teamIndex) in teamList" :key="teamIndex" clickable @click="handleClickTeam(team)" :title="team.teamName" :avatar="teamIcon(team)" :note="teamIntroduce(team)">
					<view class="chat-custom-right">
						<uni-icons type="star-filled" :color="collectColor(team)" size="18"></uni-icons>
					</view>
				</uni-list-chat>
			</uni-list>
		<uni-load-more :status="loadStatus" @clickLoadMore="handlePullRefresher()" />
		</scroll-view >
	</view>
</template>

<script>
	import { myListTeam } from "@/api/system/team.js"
	import { updateConfig } from '@/api/system/user.js'
	import config from '@/config'
	import PageHeader from "@/components/page-header/index.vue"
	export default {
		name: 'TeamSwitch',
		components: { PageHeader },
		data() {
			return {
				// 项目列表总数量
				total: 0,
				// 项目列表
				teamList: [],
				// 显示的加载状态
				loadStatus: 'more',
			}
		},
		computed: {
			/** 当前团队ID */
			teamId() {
			    return this.$store.state.user.config.currentTeamId;
			},
			/** 获取项目图标 */
			teamIcon: function() {
				return function(team) {
					return config.baseUrl + team.teamIcon;
				}
			},
			/** 获取项目介绍 */
			teamIntroduce: function() {
				return function(team) {
					return team.introduce || '未填写项目介绍';
				}
			},
			/** 标记采集的五角星颜色 */
			collectColor: function() {
				return function (team) {
					return team.collect?'#f7ba2a':'#c6d1de'
				}
			}
		},
		onLoad() {
			this.getTeamList();
		},
		methods: {
			/** 处理下拉刷新事件 */
			handlePullRefresher() {
				if(this.loadStatus === 'more') {
					this.getTeamList();
				}
			},
			/** 处理点击团队事件 */
			handleClickTeam(team) {
				this.$tab.navigateTo('/pages/system/project/project-switch/index?teamId='+team.teamId);
			},
			/** 获取团队列表 */
			getTeamList() {
				this.loadStatus = 'loading';
				myListTeam().then(res=>{
					this.teamList = [...this.teamList, ...res.rows].filter((item, index, self) =>
					    index === self.findIndex((t) => t.teamId === item.teamId)
					);
					this.total = res.total;
					if(this.total > this.teamList.length) {
						this.loadStatus = 'more';
					} else {
						this.loadStatus = 'no-more';
					}
				});
			},
		}
	}
</script>

<style scoped>

</style>